<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        h2 {
            margin-top: 20px;
            margin-bottom: 20px;
        }
        el-button {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div id="app">
<!--        已接取的订单列表-->
        <h2>已接取的订单列表</h2>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="订单号" width="100"></el-table-column>
            <el-table-column prop="customerId" label="顾客id" width="100"></el-table-column>
            <el-table-column prop="deliveryId" label="配送员id" width="100"></el-table-column>
            <el-table-column prop="productId" label="商品id" width="100"></el-table-column>
            <el-table-column prop="totalDmount" label="总价" width="100"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" width="100"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleCancel(scope.$index)">取消接取订单</el-button>
                        <el-button type="text" @click="handleFinish(scope.$index)">订单完成</el-button>
                    </template>
                </el-table-column>
        </el-table>
<!--     获取数据分页查询-->
        <el-pagination
                @current-change="handlePageChange1"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :total="total1"
                layout="total, prev, pager, next, jumper">
        </el-pagination>

<!--        未接取的订单列表-->
        <h2>待接取的订单</h2>
        <el-table :data="tableData2" style="width: 100%">
            <el-table-column prop="id" label="订单号" width="100"></el-table-column>
            <el-table-column prop="customerId" label="顾客id" width="100"></el-table-column>
            <el-table-column prop="deliveryId" label="配送员id" width="100"></el-table-column>
            <el-table-column prop="productId" label="商品id" width="100"></el-table-column>
            <el-table-column prop="totalDmount" label="总价" width="100"></el-table-column>
            <el-table-column prop="orderStatus" label="订单状态" width="100"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleAccept(scope.$index)">接单</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <el-pagination
                @current-change="handlePageChange2"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :total="total2"
                layout="total, prev, pager, next, jumper">
        </el-pagination>

    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [],
                tableData2: [],
                currentPage: 1,
                pageSize: 10,
                total1: 0,
                total2: 0,
                deliveryId1: 0,
            },
            created() {
                this.fetchData();
                this.fetchData2();
            },
            methods: {
                handleFinish(index) {
                    const order = this.tableData[index];
                    this.$confirm('确认订单完成吗？')
                       .then(() => {
                            axios.post('/orders/finish', {
                                id: order.id
                            })
                               .then(res => {
                                    if (res.data !== null){
                                        this.$message.success('订单完成');
                                        window.location.reload();
                                    } else {
                                        this.$message.success('获取不到订单列表');
                                        this.fetchData();
                                    }
                                })
                               .catch(err => {
                                    this.$message.error('订单完成失败');
                                })
                        })
                       .catch(() => {
                            this.$message.info('已取消');
                        });
                },
                publish() {
                    this.fetchData();
                    this.fetchData2();
                },
                handleCancel(index) {
                    const order = this.tableData[index];
                    this.$confirm('确认取消接单吗？')
                       .then(() => {
                            axios.post('/orders/update', {
                                id: order.id
                            })
                               .then(res => {
                                    if (res.data !== null){
                                        this.$message.success('取消接单成功');
                                        window.location.reload();
                                    } else {
                                        this.$message.success('获取不到订单列表');
                                        this.fetchData();
                                    }
                                })
                               .catch(err => {
                                    this.$message.error('取消接单失败');
                                })
                        })
                       .catch(() => {
                            this.$message.info('已取消');
                        });
                },
                handleAccept(index) {
                    this.$confirm('确认接单吗？')
                       .then(() => {
                           axios.post('/delivery/get')
                            .then(res => {
                                if (res.data === null) {
                                    this.$message.error('获取不到配送员信息');
                                    this.fetchData2();
                                }else {
                                    this.deliveryId1 = res.data;
                                    const order = this.tableData2[index];
                                    this.deliveryId = order.deliveryId;
                                    axios.post('/orders/update', {
                                        id: order.id,
                                        deliveryId: this.deliveryId1
                                    })
                                        .then(res => {
                                            if (res.data !== null){
                                                this.fetchData();
                                                this.$message.success('接单成功');
                                                this.fetchData2();
                                            } else {
                                                this.$message.success('获取不到订单列表');
                                                this.fetchData2();
                                            }

                                        })
                                        .catch(err => {
                                            this.$message.error('接单失败');
                                        })
                                }
                             })
                            .catch(err => {
                                 this.$message.error('获取配送员信息失败');
                             })
                        })
                       .catch(() => {
                            this.$message.info('已取消');
                        });
                },
                fetchData(pageNum = 1, pageSize = 10) {
                    axios.get('/delivery/get')
                       .then(res => {
                            this.deliveryId1 = res.data;
                            if (this.deliveryId1 === null){
                                this.$message.error('获取不到配送员信息');
                                this.fetchData2();
                            }else {
                                axios.get('/orders/getOrdersByUserId', {
                                    params: {
                                        pageNum: pageNum,
                                        pageSize: pageSize,
                                        deliveryId: this.deliveryId1
                                    }
                                })
                                   .then(res => {
                                        this.tableData = res.data.records;
                                        this.total1 = res.data.total;
                                    })
                                   .catch(err => {
                                        this.$message.error('获取已接取数据失败');
                                   })
                            }
                            })
                        .catch(err => {
                             this.$message.error('获取配送员信息失败');
                         })
                },
                fetchData2(pageNum = 1, pageSize = 10) {
                    axios.get('/orders/getOrdersByDeliveryId',{
                        params: {
                            pageNum: pageNum,
                            pageSize: pageSize
                        }
                    })
                       .then(res => {
                            this.tableData2 = res.data.records;
                            this.total2 = res.data.total;
                        })
                        .catch(err => {
                             this.$message.error('获取数据失败');
                         })
                },
                handlePageChange1(pageNum) {
                    this.currentPage = pageNum;
                    this.fetchData(pageNum, this.pageSize);
                },
                handlePageChange2(pageNum) {
                    this.currentPage = pageNum;
                    this.fetchData2(pageNum, this.pageSize);
                },
            }
        })
    </script>
</body>
</html>